<template>
    <div class="main" v-loading="loading">
        <div class="side">
            <div style="height:100vh">
                <el-collapse v-model="active">
                    <el-collapse-item title="部门列表" name="1" >
                        <el-tree :data="sideList" :highlight-current="true"  :props="{label: 'name'}" node-key="id" @node-click="handleNodeClick"></el-tree>
                        <!-- <el-tree :data="sideList" :highlight-current="true" :default-expanded-keys="defaultExpandedKeys" :props="{label: 'name'}" node-key="id" @node-click="handleNodeClick"></el-tree> -->
                    </el-collapse-item>
                </el-collapse>
                <div class="singlecheckout" @click="search">
                    <span class="small">用户检索与导出</span>
                    <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
                </div>
                <div class="singlecheckout" @click="importUser">
                    <span class="small">用户导入</span>
                    <i class="el-collapse-item__arrow el-icon-arrow-right"></i>
                </div>

            </div>
            
        </div>
            <router-view
                :sideList = sideList
                :info="info"
            ></router-view>
 
    </div>
    
</template>
<script>
    import $ from "jquery";

    export default {
        data() {
            return {
                loading:true,
                current: 1,
                size: 20,
                page: {},
                info: {},
                timer: null,
                key: 0,
                sideList:[],
                mode: "",
                single:{},
                active:["1"],
                defaultExpandedKeys:[],
                tableData: []
            }
        },
        watch: {
            
        },
        mounted() {
            console.log(this.$route.params.type)
            if(this.$route.params.type == 'mongo'){
                console.log('mongo版')
                this.info.type = 'mongo'
                // user
                this.info.getDList = '/dep/list'
                // usertable
                 this.info.getUserListbydid = '/user/getUsers'
                this.info.getUserList = '/user/getUser'
                this.info.searchUser = "/user/searchUser"
                this.info.delUser = "/user/delUser"
                this.info.CheckoutOperation = "/user/CheckoutOperation"
                // search
                this.info.export = "/bpm/user/export"
                this.info.roleList = "/role/list"
                // edit
                this.info.editUser = "/user/editUser"
                this.info.newUser = "/user/newUser"
                this.info.getUserInfo = "/user/getUserInfo"
                // JSON.parse({"content":"sadfghjkl‘’ \' \' \" "})
            }
            // else if(this.$route.params.type == 'normal' || this.$route.params.type == null){
            //     console.log('db2')
            //     this.info.type = 'normal'
            //     // user
            //     this.info.getDList = '/api/auto/org/getDList'
            //     // usertable
            //     this.info.getUserListbydid = '/api/v20/user/userLists'
            //     this.info.getUserList = '/api/v20/user/userList'
            //     this.info.searchUser = "/api/v20/user/searchUser"
            //     this.info.delUser = "/api/v20/user/delUser"
            //     this.info.CheckoutOperation = "/api/v20/user/CheckoutOperation"
            //     // search
            //     this.info.export = '/api/v20/user/export'
            //     this.info.roleList = "/api/v20/role/list"
            //     // edit
            //     this.info.editUser = "/api/v20/user/editUser"
            //     this.info.newUser = "/api/v20/user/newUser"
            //     this.info.getUserInfo = "/api/v20/user/getUserInfo"
            // }
            this.load()
        },
        methods: {
            load() {

                this.loading = true
                $.get(this.info.getDList,{},Response => {
                    if(Response.success){
                        this.sideList = Response.data;
                        if(this.sideList.length != 0){
                            this.defaultExpandedKeys = [this.sideList[0].id]
                            // console.log(this.defaultExpandedKeys)
                        }
                        console.log(this.sideList)

                    }else{
                        this.$message.error("失败");
                    }
                    this.loading=false
                })
            },
            handleNodeClick:function(data){
                this.getdepartmentUser(data.id)
            },
            getdepartmentUser(id){
                this.$router.push({path:"/user/"+ this.info.type +"/userTable",query:{ "id": id }})
                
            },
            search(){
                this.$router.push({path:"/user/"+ this.info.type +"/search"})
            },
            importUser(){
                this.$router.push({path:"/user/"+ this.info.type +"/import"})
            },
            exportUser(){

            }


        }
    }
</script>

<style scoped lang="less">
    .box {
        display: flex;
        flex-direction: column;
    }

    .page {
        text-align: right;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .action {
        display: flex;
        align-items: center;

        i {
            cursor: pointer;
            font-size: 16px;
            margin-left: 5px;
            margin-right: 5px;
        }
    }
    .main{
        display: flex;
        height:100%;
        .side{
            max-width:250px;
            width:18rem;
            overflow-y: auto;
            margin: 0 10px 0 10px;
            .worker{
                padding-left:20px
            }
        }
        .h100{
            width: 100%;
            // overflow: auto;
            padding:10px;
            box-sizing: border-box;

        }
    }
    .singlecheckout{
        height:48px;
        display:flex;
        align-items: center;
        cursor: pointer;
        border-bottom: 1px solid #EBEEF5;
        span{
            font-size: 13px;
        }
    }
</style>